<template>
<div>
  <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>物资管理</el-breadcrumb-item>
        <el-breadcrumb-item>出库记录</el-breadcrumb-item>
  </el-breadcrumb>
      
  <el-card style="margin-top:20px">
    <div style="margin:10px 10px;height:40px">
      <el-form :inline="true" :model="outStocks" class="demo-form-inline">
        <el-form-item label="发放单号">
          <el-input v-model="outStocks.outNum" placeholder="发放单号"></el-input>
        </el-form-item>
        <el-form-item label="发放类型">
          <el-select v-model="outStocks.type" clearable placeholder="发放类型">
            <el-option
              v-for="item in typeoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="outStocks.status" clearable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="button" @click="handleReset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <router-link to="/out-stocks">
            <el-button type="success">发放</el-button>
          </router-link>
        </el-form-item>
      </el-form>
    </div>
      <!-- 表格 -->
    <div>
      <el-table border :data="outStocksList" ref="multipleTable" style="width:1800px;margin:20px 10px">
      <el-table-column label="#" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="发放单号" width="300">
          <template slot-scope="scope">
                {{ scope.row.outNum }}
          </template>
        </el-table-column>
        <el-table-column label="发放类型"  width="100">
          <template slot-scope="scope">
          <span v-if="scope.row.type===0" class="government"> {{ scope.row.type|type }}</span>
          <span v-if="scope.row.type===1" class="hospital"> {{ scope.row.type|type }}</span>
          <span v-if="scope.row.type===3" class="personal"> {{ scope.row.type|type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="紧急程度"  width="200">
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.priority"
              disabled
              text-color="#000"
              show-text
              :texts="priority">
            </el-rate>
          
          </template>
        </el-table-column>
        <el-table-column label="发放地点" width="150">
          <template slot-scope="scope">
            {{ scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column label="总数"  width="50">
          <template slot-scope="scope">
            {{ scope.row.productNumber }}
          </template>
          </el-table-column>
        <el-table-column label="联系方式"  width="150">
          <template slot-scope="scope">
            {{ scope.row.phone }}
          </template>
          </el-table-column>
        <el-table-column label="状态"  width="100">
          <template slot-scope="scope">
           <el-tag v-if="scope.row.status === 0">已发放</el-tag>
          <el-tag type="danger" v-else-if="scope.row.status === 1">回收站</el-tag>
          <el-tag type="warning" v-else>待审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作员"  width="150">
          <template slot-scope="scope">
            {{ scope.row.operator }}
          </template>
        </el-table-column>
        <el-table-column label="发放时间"  width="200">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作"  >
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view">明细</el-button>
            <el-button size="mini" type="text" @click="delete(scope.row.id)" icon="el-icon-s-operation">回收站</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
      <!-- 分页区域 -->
    <div class="pagination-container" style="margin-right:60px">
        <el-pagination
                layout="total,sizes,prev, pager, next,jumper"
                background
                :total="total"
                :page-size="outStocks.pageSize"
                :current-page="outStocks.pageNum"
                :page-sizes="[10,15,20]"
                @current-change="handlePageChange"
                @size-change="handleSizeChange"
        >
        </el-pagination>
    </div>
  </el-card>
</div>
</template>

<script>
 let outStocks = {
    pageSize:10,
    pageNum:1,
    outNum: '',
    type:'',
    status:'0',
 }
export default {
  data(){
    return{
      outStocks:Object.assign({},outStocks),
      typeoptions:[
        {label:"全部类型",value:null},
        {label:"政府领取",value:"0"},
        {label:"医院领取",value:"1"},
        {label:"小区领取",value:"2"},
        {label:"个人领取",value:"3"},
        {label:"其他领取",value:"4"},
      ],
      options:[
        {value: '0',label: '已发放'}, 
        {value: '1',label: '回收站'}, 
        {value: '2',label: '待审核'}
      ],
      outStocksList:[],
      priority:["不急","常规","紧急","特急","超急"],
      total:null,
    }
  },
  created(){
    this.getoutStocksList()
  },
   methods:{
      //获取物资发放列表信息
      async getoutStocksList(){
          let res =  await this.$http.get("/outStock/findOutStockList",{params:this.outStocks})
          console.log(res)
          if(res.status===200){
            this.outStocksList = res.data.data.rows
            this.total = res.data.data.total
            this.$message.success("获取物资发放列表信息成功")
          }else{
            this.$message.warning("获取物资发放列表信息失败")
          }
      },
      //页码变化
      handlePageChange(val){
        this.outStocks.pageNum = val
        this.getoutStocksList()
      },
     //点击一页显示多少条
     handleSizeChange(val){
      this.outStocks.pageSize = val
      this.outStocks.pageNum = 1
      this.getoutStocksList()
     },
     //表单查询
     handleSearch() {
        this.getoutStocksList()
    },
    //表单重置
    handleReset(){
      this.outStocks=Object.assign({},outStocks),
      this.getoutStocksList()
    },
  },
  filters:{
   type(val){
     if(val===0){
       return "政府领取"
     }else if(val===1){
       return "医院领取"
     }else if(val===2){
       return "小区领取"
     }else if(val===3){
       return "个人领取"
     }else if(val===4){
       return "其他领取"
     }
   },
   status(val){
     if(val===0){
       return "已放"
     }else if(val===1){
       return "回收站"
     }else if(val===2){
       return "待审核"
     }
   }
  }
}
</script>

<style lang="less" scoped>
  
  .status{
    text-align: center;
    width: 40px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #4078FF;
    color: #4078FF;
    border-radius: 5px;
    display: inline-block;
    font-size: 13px;
  }
  .government{
    color: #7FC780;
    border: 1px solid #7FC780;
     border-radius: 5px;
     padding: 0 5px;
  }
  .hospital{
    color: #F5716C;
     border: 1px solid #F5716C;
      border-radius: 5px;
      padding: 0 5px;
  }
  .personal{
    color:#9E93B3 ;
     border: 1px solid #9E93B3;
     border-radius: 5px;
     padding: 0 5px;
  }
</style>

